<template>
	<view class="container"
    :style="{ backgroundImage:`url(${staticImgs.bg})` }"
		v-if="quesitonList"
  >
    <view class="center-wrapper">
     <view class="content-wrapper">
       <view class="tit">目录</view>
        <scroll-view scroll-y class="opts-box-wrapper">
          <view class="opts-box">
           <view class="opt-box-wrapper" v-for="(item, index) in quesitonList">
             <view
               class="opt-box"
               :class="[isSelectOptn(item) ? 'opt-box-act' : '']"
               :key="index"
               @click="itemClick(item, index)"
             >
               <view>{{index+1}}</view>
             </view>
           </view>
          </view>
        </scroll-view>
      </view>
      <image
        :src="staticImgs.submit"
        class="ok-btn"
        :style="{visibility: isAllSelect ? 'visible' : 'hidden'}"
        @click="okHandle"
      />
    </view>
	</view>
</template>

<script>
  export default {
    data() {
      return {
        quesitonList: null,
        isAllSelect: false,
        staticImgs: {
          bg: this.imgBaseURL + '/scl/directory/bestxg/bg.png',
          submit: this.imgBaseURL + '/scl/directory/bestxg/submit.png'
        }
      }
    },
    mounted() {
      this.quesitonList = JSON.parse(uni.getStorageSync('questionList'))
      let len = 0;
      this.quesitonList.map((item) => {
        item.optnList.forEach((itemOptn) => {
          if (itemOptn.select && itemOptn.select == '1') {
            len++;
          }
        })
      })
      if (len == this.quesitonList.length) {
        this.isAllSelect = true;
      }
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#000000'
      })
    },
    methods: {
      okHandle() {
        this.$emit('ok')
      },
      isSelectOptn(item) {
        let isSelect;
        item.optnList.forEach((itemOptn) => {
          if (itemOptn.select && itemOptn.select == '1') {
            isSelect = '1';
          }
        })
        return isSelect;
      },
      itemClick(item, index) {
        uni.$emit('updateDirectoryIndex', {index: index});
        uni.navigateBack();
      }
    },
    beforeDestroy() {
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#ffffff'
      })
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: center top;
    box-sizing: border-box;
    height: 100vh;

    .center-wrapper {
      padding: 267rpx 56rpx 107rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
      flex: 1 0 auto;
      height: 100vh;

      .ok-btn {
        width: 340rpx;
        height: 110rpx;
        margin: 0 auto;
        margin-top: 65rpx;
        flex: 0 0 auto;
      }

      .content-wrapper {
        flex: 1 0 auto;
        padding: 50rpx 0;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-color: transparent;
        height: 0;
        width: 100%;

        .tit {
          font-weight: bold;
          font-size: 54rpx;
          color: #C4FFF5;
          line-height: 75rpx;
          margin-bottom: 30rpx;
          text-align: center;
          flex: 0 0 auto;
        }
      }

      .opts-box-wrapper {
        flex: 1 0 auto;
        height: 0;
      }

      .opts-box {
        display: flex;
        flex-wrap: wrap;
        padding: 0 30rpx;

        .opt-box-wrapper {
          padding: 10rpx;
          box-sizing: border-box;
          width: (100% / 6);
        }

        .opt-box {
          width: 100%;
          height: 80rpx;
          border-radius: 50%;
          background-image: none;
          color: #C4FFF5;
          background-color: #4384CD;
          font-weight: bold;
          font-size: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          background-position: center center;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          box-shadow: inset 0 0 20rpx 0 #0D5095;
        }

        .opt-box-act {
          color: #FFF;
          box-shadow: inset 0 0 20rpx 0 rgba(35, 140, 0, 0.2);
          background-image: linear-gradient(180deg, #F0DDC8 0%, #DFBD94 45%, #AB6617 100%);
          background-color: transparent;
        }
      }
    }
  }
</style>